<template>
  <div>
    <label for="account">账号:</label>
    <input type="text" id="account" v-model="loginForm.acc" />
    <br />
    <label for="password">密码:</label>
    <input type="password" id="password" v-model="loginForm.pwd" />
    <br />
    <button @click="handler" :disabled="loading">登录<template v-if="loading">中...</template></button>
  </div>
</template>

<script>
import { ref } from "vue";
import { useRouter } from "vue-router";

export default {
  setup() {
    const loginForm = ref({
      acc: "",
      pwd: ""
    });

    const loading = ref(false);

    const router = useRouter();

    const handler = async () => {
      loading.value = true;
      // 模拟登录请求
      await new Promise(resolve => setTimeout(resolve, 1000));
      if (loginForm.value.acc === "admin" && loginForm.value.pwd === "admin") {
        localStorage.setItem("account", loginForm.value.acc);
        router.push("/home");
      } else {
        router.push("/error");
      }
      loading.value = false;
    };

    return {
      loginForm,
      loading,
      handler
    };
  }
};
</script>

<style scoped>
input {
  padding: 6px 10px;
  font-size: 16px;
  border-radius: 4px;
  border: 1px solid #ccc;
  outline: none;
}
button {
  padding: 8px 16px;
  font-size: 16px;
  border-radius: 4px;
  background-color: #409eff;
  color: #fff;
  border: none;
  cursor: pointer;
  outline: none;
}
button:disabled {
  background-color: #c1c1c1;
  color: #fff;
  cursor: not-allowed;
}
</style>
